<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑用户</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form">
					<input type="hidden" name="userId" id="userId">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-block">
							<input type="text" name="userName" id="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
						</div>
					</div>			
					<div class="layui-form-item">
						<label class="layui-form-label">邮箱</label>
						<div class="layui-input-block">
							<input type="email" name="email" id="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
						</div>
					</div>	
					<div class="layui-form-item">
						<label class="layui-form-label">分配角色</label>
						<div class="layui-input-block">
							<div id="assignRoles" class="xm-select-demo"></div>
						</div>
					</div>	
					<div class="layui-form-item" style="text-align: right;">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit lay-filter="edit">更新</button>
						</div>
					</div>
				</form>
		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../component/js/xm-select.js"></script>
		<script>
			layui.use(function(){

				let form = layui.form;
				let layer = layui.layer;
				let $ = layui.$;

				window.addEventListener('message', function(d){
					$('#userId').val(d.data.userId);
					$('#userName').val(d.data.userName);
					$('#email').val(d.data.email);
					let roleList = d.data.roleList;
					let roleListArr = [];
					if(roleList && roleList.length>0){
						for(let i=0; i<roleList.length; i++){
							roleListArr.push(roleList[i].roleId);
						}
					}
					
					$.getJSON('http://127.0.0.1:8080/getAllRole', function(res){
						if(res.code==0){
							let allRole = res.data;
							for(let i=0; i<allRole.length; i++){
								if(roleListArr.indexOf(allRole[i].roleId)!=-1){
									res.data[i].selected=true;
								}		
							}

							xmSelect.render({
								el: '#assignRoles',
								prop: {
									name: 'roleName',
									value: 'roleId'
								},
								data: res.data,
								filterable: true,
								name: 'roleList'
							});

						}else{
							layer.msg(res.msg);
						}
					});
				});

				form.on('submit(edit)', function(obj){
					let user = obj.field;
					let roleListStr = user.roleList;
					let roleListArr = roleListStr.split(",");
					let roleList = [];
					if(roleListArr && roleListArr.length>0){
						for (let i = 0; i < roleListArr.length; i++) {
							let role = {};
							role.roleId = roleListArr[i];
							roleList.push(role);
						}
					}
					user.roleList=roleList;

					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8080/updateUser',
						data: JSON.stringify(user),
						contentType: 'application/json',
						dataType: 'json',
						success: function(res){
							if(res.code==0){
								let index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							}else{
								layer.msg(res.msg);
							}
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>
